 body,
 html {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
     background-color: #000;
 }
 audio{
     position: fixed;
     right:10px;
     top:10px;
 }
 [v-cloak] {
     visibility: hidden !important;
 }
 
 body {
     display: flex;
     align-items: center;
     /*定义body的元素垂直居中*/
     justify-content: center;
     /*定义body的里的元素水平居中*/
 }
 
 @font-face {
     font-family: 'Gotham-Book';
     src: url('fonts/Gotham-Book.woff2');
     /* IE9+ */
 }
 
 * {
     font-family: 'Gotham-Book';
     background-attachment: fixed;
     outline: none;
     -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
     -ms-text-size-adjust: none;
     text-size-adjust: none;
     -moz-user-select: none;
     /*火狐*/
     -webkit-user-select: none;
     /*webkit浏览器*/
     -ms-user-select: none;
     /*IE10*/
     -khtml-user-select: none;
     /*早期浏览器*/
     user-select: none;
 }
 input,textarea,.bbbug_main_chat_name,.bbbug_main_chat_content{
    -moz-user-select:text; 
    -webkit-user-select:text; 
    -ms-user-select:text; 
    -khtml-user-select:text; 
    user-select:text;
 }
 
 ::-webkit-scrollbar {
     width: 5px;
     /*对垂直流动条有效*/
     height: 5px;
     /*对水平流动条有效*/
 }
 /*定义滚动条的轨道颜色、内阴影及圆角*/
 
 ::-webkit-scrollbar-track {
     /* background-color: rgba(50, 50, 50, 0.1); */
     background-color: white;
     border-radius: 5px;
 }
 /*定义滑块颜色、内阴影及圆角*/
 
 ::-webkit-scrollbar-thumb {
     border-radius: 5px;
     background-color: rgba(0, 0, 0, 0.2);
 }
 /*定义两端按钮的样式*/
 
 ::-webkit-scrollbar-button {
     background-color: transparent;
 }
 /*定义右下角汇合处的样式*/
 
 ::-webkit-scrollbar-corner {
     background: transparent;
 }
 .bbbug_dark .bbbug_dark_cover{    
    mix-blend-mode: difference;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99999999999999;
    pointer-events: none;
    background-color: rgba(255,255,255,0.85);
 }
 .bbbug_dark .bbbug_main_box{
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 0px 20px rgba(255,255,255, 0.9);
 }
 .bbbug_dark .el-loading-mask{
     background-color: rgba(0,0,0,0.3);
 }
 .bbbug_dark .bbbug_bg,
 .bbbug_dark .el-loading-mask,
 .bbbug_dark .bbbug_main_menu,
 .bbbug_dark .iconfont,
 .bbbug_dark .bbbug_link,
 .bbbug_dark .bbbug_main_menu_song_bg,
 .v-modal
 {
    filter: invert(0.85) contrast(2);
 }
 .bbbug_dark .bbbug_main_chat img,
 .bbbug_dark .bbbug_main_right img
 {
    filter: invert(0.85) contrast(2);
 }
 .bbbug_dark .bbbug_main_chat_head_image,
 .bbbug_dark .bbbug_main_right_online_user_head_image,
 .bbbug_dark .bbbug_main_menu_song_bg
 {
     border:1px solid #333;
 }
 .love {
    -webkit-animation: rotate 20s linear infinite;
    -moz-animation: rotate 20s linear infinite;
    -o-animation: rotate 20s linear infinite;
    animation: rotate 20s linear infinite;
}
.love_fast {
    -webkit-animation: rotate 5s linear infinite;
    -moz-animation: rotate 5s linear infinite;
    -o-animation: rotate 5s linear infinite;
    animation: rotate 5s linear infinite;
}
.user_icon{
    cursor: pointer;
    vertical-align: middle;
}
.user_male{
    color:#759FD1 ;
}
.user_female{
    color:#F288A4;
}
 .bbbug_scroll {
     overflow: hidden;
     overflow-y: scroll;
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
 }
 
 .bbbug_tips {
     align-items: center;
     justify-content: center;
     color: #999;
     font-size: 12px;
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     display: flex;
     display: -webkit-flex;
     align-items: center;
     justify-content: center;
 }
 /* 主窗体开始 */
 
 .bbbug_bg {
     background: #000 url("//cdn.bbbug.com/new/images/bg_dark.jpg") top center no-repeat;
     background-size: cover;
     position: fixed;
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
 }
 
 .bbbug_main {
     position: fixed;
     left: 8%;
     right: 8%;
     top: 8%;
     bottom: 8%;
 }
 .bbbug_main_box{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left:0;
 }
 .bbbug_frame{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: white;
    -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
 }
 
 .bbbug_main_menu {
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 80px;
     background-color: #333;
     text-align: center;
     border-top-left-radius: 10px;
     border-bottom-left-radius:10px;
 }
 
 .bbbug_main_menu_head {
     margin-top: 20px;
     margin-bottom: 50px;
 }
 
 .bbbug_main_menu_head img {
     width: 50px;
     height: 50px;
     border-radius: 5px;
     cursor: pointer;
 }
 
 .bbbug_main_menu_icon {
     margin-top: 20px;
     text-align: center;
     text-decoration: none;
     outline:none;
 }
 .bbbug_main_menu_icon a{
    font-size:12px;
    color:#999;
    text-decoration: none;
    outline:none;
 }
 .bbbug_main_menu_icon a:hover{
    color:#fff;
 }
 .bbbug_main_menu_icon img {
     width: 32px;
     height: 32px;
     cursor: pointer;
     text-decoration: none;
     margin-bottom: -8px;
 }
 
 .bbbug_main_menu_song {
     position: absolute;
     left: 0;
     bottom: 70px;
     right: 0;
 }
 
 .bbbug_main_menu_song img {
     width: 48px;
     height: 48px;
     border-radius: 100%;
     cursor: pointer;
     box-shadow: 0px 0px 15px rgba(255,255,255,0.5);
 }
 .bbbug_main_menu_song_box{
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    position: absolute;
    left: 90px;
    bottom:110px;
    z-index: 99;
    padding: 10px;
    font-size: 14px;
    color: #333;
    border-radius: 10px;
 }
 .bbbug_main_menu_song_title{
     font-size:16px;
     text-align:left;
     font-weight: bold;
     color:#666;
 }
 .bbbug_main_menu_song_user{
     font-size:12px;
     text-align:left;
     margin-top: 0px;
     color: #999;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 .bbbug_main_menu_song_bg{
     width:200px;
     border: 1px solid #eeeeee;
     border-radius: 5px;
 }
 .bbbug_main_menu_setting {
     position: absolute;
     left: 0;
     bottom: 10px;
     right: 0;
 }
 .bbbug_main_menu_song_ctrl{
     text-align: center;
     vertical-align: middle;
     position: absolute;
     left:0;
     right:0;
     bottom:130px;
 }
 .bbbug_main_menu_song_ctrl .iconfont{
    cursor: pointer;
    vertical-align: middle;
    font-size:20px;
    color: #666;
 }
 .bbbug_main_menu_song_ctrl .iconfont:hover{
     color:orangered;
 }
 .bbbug_main_menu_song_volume_bar{
    position: absolute!important;
    right: 22px;
    bottom: 160px;
 }
 
 .bbbug_main_menu_setting img {
     width: 32px;
     height: 32px;
     cursor: pointer;
 }
 
 .bbbug_main_right {
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     width: 25%;
     min-width: 360px;
     text-align: center;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
     background-color: #f5f5f5;
     height: 100%;    
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
     overflow: hidden;
 }
 
 .bbbug_main_chat_room_info {
     padding: 10px;
     vertical-align: middle;
     font-size: 16px;
     color: #333;
     border-bottom: 1px solid #eee;
 }
 .bbbug_main_chat_online{
     position: absolute;
     right:20px;
     top:12px;
     cursor: pointer;
     font-size:14px;
     color: #999;
     vertical-align: middle;
 }
 .bbbug_main_chat_online .iconfont{
     font-size:14px;
     vertical-align: middle;
 }
 .bbbug_main_chat_online font{
     margin-left: 3px;
     font-size:14px;
     vertical-align: middle;
     display: inline-block;
 }
 
 .bbbug_main_chat_room_id {
     background-color: #fff;
     color: orangered;
     border-radius: 3px;
     border: 1px solid orangered;
     padding: 2px 5px;
     font-size: 12px;
     font-weight: 500;
     font-weight: bold;
 }
 
 .bbbug_main_room_icon {
    vertical-align: middle;
    font-size: 16px;
    color: orangered;
    font-weight: bold;
    margin-right: 5px;
    cursor: pointer;
}
.bbbug_main_room_icon_setting::before{
    font-size:16px;
    vertical-align: middle;
}
.bbbug_main_room_icon_setting {
    font-size: 14px;
    cursor: pointer;
}
 .bbbug_main_room_online {
     color: orangered;
     margin-right: 5px;
 }
 /* 主窗体结束 */
 
 /* 在线列表开始 */
 .bbbug_main_right_online_box{
    width:300px;min-width:auto;
 }
 .bbbug_main_right_online_title {
    padding: 12px;
    text-align: left;
    font-size: 18px;
    background-color: white;
    margin-bottom: 10px;
}
 .bbbug_main_right_online_list{
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    top: 50px;
}
.bbbug_main_right_online_item{
    background-color: white;
    margin: 5px;
    border-radius: 5px;
    height: 55px;
    cursor: pointer;
    text-align: left;
    padding: 10px;
    position: relative;
    overflow: hidden;
}

 
.bbbug_main_right_online_user_head {
    position: absolute;
    left: 10px;
    top: 10px;
}

.bbbug_main_right_online_user_head_image {
    width:50px;
    height: 50px;
    border-radius: 100%;
    border:1px solid #f5f5f5;
}
.bbbug_main_right_online_user_badge{
    background-color: #ddd;
    color: #666;
    transform: rotate(45deg);
    position: absolute;
    right: -25px;
    top: -25px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 78px;
    font-size:12px;
}
.bbbug_main_right_online_user_badge_admin{
    background-color: #666;
    color: #fff;
    transform: rotate(45deg);
    position: absolute;
    right: -25px;
    top: -25px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 78px;
    font-size:12px;
}

.bbbug_main_right_online_user_nick {
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.bbbug_main_right_online_user {
    margin-left: 60px;
    margin-top:3px;
}

.bbbug_main_right_online_desc {
    font-size: 12px;
    color: #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 10px;
    vertical-align: middle;
}
/* 在线列表结束 */
 /* 右边房间列表开始 */
 
 .bbbug_main_right_room_item {
     background-color: white;
     margin: 0px 5px 10px 5px;
     border-radius: 5px;
     height: 80px;
     cursor: pointer;
     text-align: left;
     padding: 10px;
     position: relative;
 }
 
 .bbbug_main_right_room_title {
     padding: 12px;
     text-align: left;
     font-size: 18px;
     background-color: white;
     margin-bottom: 10px;
 }
 
 .bbbug_main_right_room_right {
     position: absolute;
     right: 10px;
     top: 10px;
     font-size: 14px;
     background-color: #333;
     color: white;
     border-radius: 3px;
     padding: 5px 15px;
     cursor: pointer;
 }
 
 .bbbug_main_right_room_list {
     position: absolute;
     right: 0;
     left: 0;
     bottom: 0;
     top: 110px;
 }
 
 .bbbug_main_right_room_name {
     vertical-align: middle;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     margin-right: 50px;
     font-size: 14px;
     color: #333;
     font-weight: bold;
 }
 
 .bbbug_main_right_room_id {
     position: absolute;
     right: 10px;
     top: 10px;
     font-size: 12px;
     background-color: #f5f5f5;
     color: #999;
     padding: 2px 5px;
     border-radius: 5px;
 }
 
 .bbbug_main_right_room_info {
     position: relative;
     margin-top: 20px;
 }
 
 .bbbug_main_right_room_user_head {
     position: absolute;
     left: 0px;
     top: 0px;
     width: 40px;
     height: 40px;
     border-radius: 10px;
 }
 
 .bbbug_main_right_room_user_nick {
     font-size: 14px;
     color: #333;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     line-height: 20px;
 }
 
 .bbbug_main_right_room_user {
     margin-left: 50px;
 }
 
 .bbbug_main_right_room_desc {
     font-size: 12px;
     color: #999;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     margin-top: 5px;
 }
 /* 右边房间列表结束 */
 /* 右边歌单列表开始 */
 
 .bbbug_main_right_song_item {
     background-color: white;
     margin: 0px 5px 10px 5px;
     border-radius: 5px;
     height: 50px;
     cursor: pointer;
     text-align: left;
     padding: 10px;
     position: relative;
 }
 
 .bbbug_main_right_song_title {
     padding: 12px;
     text-align: left;
     font-size: 18px;
     background-color: white;
     margin-bottom: 10px;
 }
 
 .bbbug_main_right_song_right {
     position: absolute;
     right: 10px;
     top: 10px;
     font-size: 14px;
     background-color: #333;
     color: white;
     border-radius: 3px;
     padding: 5px 15px;
     cursor: pointer;
     text-decoration: none;
 }
 
 .bbbug_main_right_song_list_search {
     position: absolute;
     right: 0;
     left: 0;
     bottom: 0;
     top: 110px;
 }
 
 .bbbug_main_right_song_list {
     position: absolute;
     right: 0;
     left: 0;
     bottom: 0;
     top: 55px;
 }
 
 .bbbug_main_right_song_name {
     vertical-align: middle;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     margin-right: 80px;
     font-size: 14px;
     color: #333;
 }
 
 .bbbug_main_right_song_singer {
     vertical-align: middle;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: 12px;
     color: #999;
     margin-top: 15px;
 }
 
 .bbbug_main_right_song_singer_at {
     color: orangered;
 }
 
 .bbbug_main_right_song_controll {
     position: absolute;
     right: 10px;
     top: 10px;
 }
 
 .bbbug_main_right_song_button {
     border: none;
     padding: 2px 5px;
     border-radius: 3px;
     display: inline-block;
     font-size: 12px;
     font-weight: 400;
     cursor: pointer;
     background-color: white;
 }
 
 .bbbug_main_right_song_add {
     color: #999;
     border: 1px solid #ddd;
 }
 
 .bbbug_main_right_song_add:hover {
     color: #333;
     border: 1px solid #333;
 }
 
 .bbbug_main_right_song_delete {
     color: orange;
     border: 1px solid orange;
 }
 
 .bbbug_main_right_song_delete:hover {
     color: orangered;
     border: 1px solid orangered;
 }
 
 .bbbug_main_right_song_played {
     color: orangered;
     margin-right: 3px;
 }
 /* 右边歌单列表结束 */
 
 @media screen and (max-width: 1200px) {
     .bbbug_main {
         position: fixed;
         left: 0;
         right: 0;
         top: 0;
         bottom: 0;
         width: 100%;
         height: 100%;
     }
     .bbbug_main_box{
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
     }
     .bbbug_main_right{
        border-radius: 0!important;
     }
 }
 
 @media screen and (max-height: 700px) {
     .bbbug_main {
         position: fixed;
         left: 0;
         right: 0;
         top: 0;
         bottom: 0;
         width: 100%;
         height: 100%;
     }
     .bbbug_main_box{
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
     }
     .bbbug_main_right{
        border-radius: 0!important;
     }
 }
 
 .bbbug_phone_message_back{
    display: none;
}
 @media screen and (max-width: 480px) {
     .bbbug_main_right {
         left: 80px;
         right: 0;
         width: auto!important;
         min-width: auto!important;
         box-shadow:none!important;
         border-radius: 0!important;
     }
     .bbbug_phone_message_back{
         display: inline-block;
     }
     .hideWhenPhone{
         display: none!important;
     }
     .bbbug_main_chat_emojis{
         width:auto!important;
         position:fixed!important;
         left:10px!important;
         right:10px!important;
     }
     .el-message-box__wrapper{
         display: flex;
         align-items: center;
         justify-content: center;
     }
     .bbbug_login{
         padding:0px 20px;
     }
     .el-message-box{
         width:90%;
     }
     .el-message{
         width:90%;
         min-width:auto;
     }
 }